我有个问你们.我使用Angular 2,使用Angular-CLI设置,使用UiRouter(ui-router-ng2).所有这些都很棒,我正在取得进展.但是,我遇到了一个问题,我确信它很容易解决,我只是不知道该怎么做.

所以我有一个“菜单服务”,它从我设置的模拟数据库中获取类别.该服务运行良好,我能够列出类别,并使用这些类别来获取子类别和项目.我正在使用无URL的参数,即我将它们声明为对象,并使用[UiParams]传递它们.所有这一切都运行良好,我甚至可以使用后退按钮’uiSref =“^”’进入父状态.太棒了.但！出于测试目的,我正在使用ui-router-visualizer,我遇到的问题是,即使对象为空,我仍然可以转换到状态.从我的理解中看,该对象已被解析,并返回为空.这当然可以防止错误,但是如果用户神奇地以子状态结束,则放入一个空对象,然后什么都不显示.这会导致错误本身,因为视图没有内插任何内容.这也会导致后退按钮发生故障,因为ui-params不可用.

现在,所有这一切,如果菜单服务中的返回对象为空,我如何拒绝状态转换？

代码对于州.我正在使用Ng2StateDeclaration.

{
    name:'category',parent:'main.categories',params:{
        categoryid:{}
    },views:{
        '$default@main': { component: SubcategoryComponent },receipt: { component: ReceiptComponent }
    },resolve:[
        {
            token:'category',deps: [Transition,MenuService],resolveFn: (trans,menuSvc) => {
                menuSvc.getCategory(trans.params().categoryid)
            }

        }
    ]
}`

以下是菜单服务的完整代码.这非常简单.

import { Injectable,Inject } from '@angular/core';
import { Headers,Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class MenuService {

constructor(@Inject(Http) public http:Http) { }

getCategories() {
    return this.http.get('api/menu')
            .map(this.extractData)
            .toPromise();

}
private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}
getCategory(id){
    console.log(id);
    return this.getCategories()
        .then(cats => cats.find(cat => cat.id == id));
}
}

而且组件也非常基础.我正在使用他们的quickstart-app作为我的主要学习工具.

import { Component,Input,Inject } from '@angular/core';

@Component({
  templateUrl: './subcategory.component.html',styleUrls: ['./subcategory.component.css'],inputs: ["category"],})
export class SubcategoryComponent {

category;
}

如果有人能指出我回答这个问题的某个地方,或者告诉我在哪里以及如何放入一个返回对象或拒绝状态转换的If / Else语句,那就太棒了.我也在构建类似quickstart示例的内容,因此这些内容都位于主应用程序模块的单独模块中.

对于整个过程我仍然非常环保,所以当涉及到控制状态转换的业务逻辑时,我不太确定在哪里做准确的工作.

提前致谢！

Now,all of that being said,how do I reject the state transition if the return object from my menu service is empty?

如果resolve函数返回被拒绝的promise,则转换将错误并且不会运行.由于你的getCategory函数返回并且没有找到空对象(而不是被拒绝的promise),你将不得不在服务中或在解析中拒绝它.

不管怎样,你可以写一个这样的帮手：

const rejectWhenEmpty = (val) =>
    val ? val : Promise.reject('value is empty)

然后在没有加载任何值时使用它来拒绝解析

resolveFn: (trans,menuSvc) =>
            menuSvc.getCategory(trans.params().categoryid).then(rejectWhenEmpty)

或在服务中：

getCategory(id){
    return this.getCategories()
        .then(cats => cats.find(cat => cat.id == id))
        .then(rejectWhenEmpty);
}

我一直试图在我的Angular应用程序中使用ngTools设置AOT(使用Webpack进行模块加载)并且有一个绝对的噩梦.我已经浏览了文档 here和 here中的各种资源以及阅读ngTools自述文件,查看了Angular CLI中的示例(此应用程序不是使用Angular CLI构建的,但我认为它至少是一个有用的参考资料)通过 this resource在Angular Webpack Sass ngTools上找到(我也使用SASS,但编译好我的webpack.config.aot.js – 它确实阻止我切换到ngc,至少就我而言发现,这是我在一些例子中看到的,以及我在过去几天发现的每个github问题或stackoverflow帖子,无论我做什么尝试构建aot都会产生以下错误：

ERROR in window is not defined

 ERROR in /Users/nataliecoley/development/company-app-name/src/main-aot.ts (2,36): Cannot find module '../aot/src/app/app.module.ngfactory'.

 ERROR in ./src/main-aot.ts

找不到模块：错误：无法解析’/ Users / nataliecoley / development / company-app-name / src’中的’../aot/src/app/app.module.ngfactory’
 @ ./src/main-aot.ts 2：0-73

目前我一直在忽略第一个问题(部分是因为我似乎无法在网上发现任何其他人有这个错误,部分是因为我搜索了我的整个代码库,不包括节点模块,并且窗口不会出现在任何地方代码)但我愿意接受建议,如果有人知道可能来自哪里(或者你认为它与错误2和3有关).

我认为第二个和第三个错误消息是我的问题的主要来源,因为很明显app.module.ts没有在main-aot.ts之前编译,所以当main-aot.ts去编译它时找不到该文件.但是,我根据我发现的文档进行了设置,以便在编译器到达main-aot.ts时已经编译好了app.module.ngfactory.

很明显,我的设置中缺少一些部分,因为我在网上找到的每个解决方案设置略有不同,我似乎无法缩小范围.我所知道的是,到目前为止我没有尝试过的任何内容消除了这个错误(或者产生了任何其他新错误),并且我很乐意帮助那些成功设置AOT ngTools webpack Angular以帮助缩小这里发生的事情.

这是我的文件结构(简化)：

.
+-- config/
|   +-- helpers.js
|   +-- webpack.common.js
|   +-- webpack.dev.js
|   +-- webpack.prod.js
+-- src/
|   +-- app/
|   +-- assets/
|   +-- vendor/
|   +-- index.html
|   +-- main.ts
|   +-- main-aot.ts
|   +-- polyfills.ts
|   +-- tsconfig.json
+-- package.json
+-- server.js
+-- tsconfig-aot.json
+-- webpack.config.aot.js
+-- webpack.config.js (only contains: module.exports = require('./config/webpack.dev.js');)

我用来运行我的aot构建的命令(我从我分享给角文档的第一个链接中的设置中提取)是“build：aot”：“webpack –config webpack.config.aot.js”,in我的package.json.至于相关软件包版本,我在4.1.0所有角度软件包,我使用的是@ ngtools / webpack v1.3.1,以及webpack v 2.3.3和typescript v2.3.0

注意：我已经看到了一些关于aot和某些打字稿/角度版本的问题,但我们真的希望坚持这些部分以与我们的其他Angular应用程序保持一致(现在生产超过一年,目前在v4上. 1.0,对降级没有兴趣)以及支持strictnullchecks等等.我知道我听说有人让AOT使用这些版本,任何人都不得不使用旧版本的Angular似乎很荒谬使用AOT所以我觉得必须有一种方法让它工作.

这是我的tsconfig-aot.json：

{
  "compilerOptions": {
    "target": "es5","module": "es2015","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [ "es2015","dom" ],"noImplicitAny": true,"suppressImplicitAnyIndexErrors": true,"removeComments": false,"noUnusedLocals": true,"noUnusedParameters": true,"strictnullchecks": true,"skipLibCheck": true,"skipCodeGeneration": false,"typeRoots": [
      "../node_modules/@types/"
    ]
 },"files": [
    "src/app/app.module.ts","src/main-aot.ts"
  ],"compileOnSave": true,"angularCompilerOptions": {
    "genDir": "aot","entryModule": "src/app/app.module#AppModule","skipMetadataEmit": true
  }
}

这是我的webpack.config.aot.js：

const ngtools = require('@ngtools/webpack');
const webpack = require('webpack');
const helpers = require('./config/helpers');


module.exports = {
  devtool: 'source-map',entry: {
    main: './src/main-aot.ts'
  },resolve: {
     extensions: ['.ts','.js']
  },target: 'node',output: {
    path: helpers.root('dist'),filename: 'build.js'
  },plugins: [
    new ngtools.AotPlugin({
      tsConfigPath: helpers.root('tsconfig-aot.json'),entryModule: helpers.root('src','app','app.module#AppModule')
    }),new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
  ],module: {
    rules: [
      {
         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },{ test: /\.css$/,loader: 'raw-loader' },{
        test: /\.scss$/,loaders: ['to-string-loader','style-loader','css-loader','resolve-url-loader','sass-loader?sourceMap']
      },{ test: /\.html$/,{ test: /\.ts$/,loader: '@ngtools/webpack' }
    ]
  }
}

关于entryModule的注释.在一些资源中,我看到stateModule选项必须在tsconfig-aot.json中,而不是在webpack.config.aot.js中,我见过的其他例子只在webpack.config.aot中. JS.我在tsconfig-aot.json中尝试过它只是webpack.config.aot.js及以上两者 – 这些选项似乎都无法解决问题.我也尝试编辑各种文件的路径(比如我的tsconfig-aot.json中的文件数组),以防我设置它,因为它在我的文件的错误位置找不到它.

这是我的主要内容：

import { platformbrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

platformbrowser().bootstrapModuleFactory(AppModuleNgFactory);

我担心它会成为我错过的一个愚蠢的小作品,但到目前为止我一直在尝试一切,似乎很多其他人在网上也在努力使用这个设置,似乎没有任何关于如何做到这一点的在线清楚信息,所以我想我会发布在这里,希望实际上成功地在Angular Webpack应用程序中工作的人可以指出我正确的方向或共享资源,帮助他们解决它出.提前致谢！

请注意,从您的资源：

I had some trouble with the path to the ngfactory code when compiling with ngc: Can’t resolve ‘./../path/to/app/app.module.ngfactory’ This seems related to this issue. The solution for me was to define the genDir in the webpack config rather than the tsconfig.js file.

但是,ngtools会为您完成所有这些操作,因为它旨在成为一个完整的黑盒AOT机制.您正在将ngc(即ngfactory generation)与Angular CLI的AOT前端(ngtools)混合使用.

如果您想使用ngfactories,您必须使用ngc构建您的应用程序.就个人而言,我使用ngtools进行开发构建,然后使用ngc和Angular Universal服务器端渲染器.

请注意,ngtools有一个错误,使开发相当痛苦 – 在第二次重新编译之前,将无法识别更改：
https://github.com/angular/angular-cli/issues/5137

我怎么用这个东西？

我的webpack配置与你的配置非常相似,然后我在生产版本中使用ngc来生成工厂……

的package.json：

"aot": "./node_modules/.bin/ngc -p tsconfig-aot.json",

并使用工厂和服务器端渲染……

server.ts：

import 'reflect-Metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from './dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = process.env.PORT || 8081;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname,'dist','index.html')).toString();

app.engine('html',(_,options,callback) => {
  const opts = { document: template,url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory,opts)
    .then(html => callback(null,html));
});

app.set('view engine','html');
app.set('views','src')

app.get('*.*',express.static(join(__dirname,'dist')));

app.get('*',(req,res) => {
  res.render('index',{ req });
});

app.listen(PORT,() => {
  console.log(`listening on http://localhost:${PORT}!`);
});

这是angular.json的一部分：

"configurations": {
            "production": {
              "optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ]
            }

我想要做的是控制开发环境.例如,将sourceMap更改为false,我不希望通过向ng build添加参数来实现.在angular.json中有没有相当于生产的参考开发？

还有一些非常重要的事情：在Angular-CLI 6中没有弹出！那怎么可能看到并修改webpack.config.js呢？

所有环境的默认设置都在架构师中配置>构建>期权财产

"projects": {
    "MyProject": {
      "root": "","sourceRoot": "src","projectType": "application","architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts",//Add settings here
            "sourceMap": false,"fileReplacements": [
                {
                    "replace": "src/environments/environment.ts","with": "src/environments/environment.anotherdevenv.ts"
                }
            ]

这些设置按原样用于dev env,因此您可以修改它(但如果它们不覆盖指定的设置,这将影响其他环境)

您还可以创建自己的“开发”配置(例如,通过复制生产conf,并根据需要进行更改),并在该conf中指定特定于开发环境的设置.然后运行以下命令

ng serve -c development

弹出命令暂时被禁用,但应该根据角度cli团队核心成员的评论很快添加(https://github.com/angular/angular-cli/issues/10945)