我已经在成功之前使用了Angular的提前编译。现在我已经添加了路由和延迟加载到我的应用程序,并且我无法再继续工作。提前编译时出现SystemJS错误(没有NgZone的提供者)
我已更新我的代码以使用2.0(最新)版本,并且在我即时编译时运行正常。但是编译名列前茅的时候,我收到以下错误时:
(index):52 Error: (SystemJS) XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Error loading https://127.0.0.1:3443/traceur.js Error loading https://127.0.0.1:3443/node_modules/@angular/core/src/linker/ng_module_factory.js as "@angular/core/src/linker/ng_module_factory" from https://127.0.0.1:3443/dist/app/app.module.ngfactory.js
看着app.module.ngfactory.js,也有类似以下一堆进口:
...
var import0 = require('@angular/core/src/linker/ng_module_factory');
var import1 = require('./app.module');
var import2 = require('@angular/common/src/common_module');
var import3 = require('@angular/core/src/application_module');
var import4 = require('@angular/platform-browser/src/browser');
var import5 = require('@angular/forms/src/directives');
var import6 = require('@angular/forms/src/form_providers');
...
我“已经注意到,如果我改变
var import0 = require('@angular/core/src/linker/ng_module_factory');
到
import * as import0 from '@angular/core/src/linker/ng_module_factory';
个
SystemJS接受这一行,并触发下一行相同的错误,即
var import1 = require('./app.module');
所以我一直试图让SystemJS认识到这一点CommonJS的风格格式,但这只是导致其他错误,没有其中比上面的更清楚。
编辑: 当我切换到tsconfig使用ES2015模块和运行应用程序,我得到了(可怕)traceur.js错误:
https://127.0.0.1:3443/traceur.js Failed to load resource: the server responded with a status of 404 (Not Found) 2016-09-26 10:11:19.842 127.0.0.1/:52 Error: (SystemJS) XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Error loading https://127.0.0.1:3443/traceur.js Error loading https://127.0.0.1:3443/dist/app/main.js
我在这之前遇到并解决它通过删除包含导入语句的注释掉的代码。在这种情况下,我的代码中没有这样的行。
这里是我的systemjs.config.js:
(function(global) {
System.defaultJSExtensions = true;
System.defaultExtension = 'js';
// map tells the System loader where to look for things
// N.B. the dots at the start of the paths are very important!
var map = {
'app': './dist/app',
'@angular': './node_modules/@angular',
'rxjs': './node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'compiler-cli',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'tsc-wrapped',
'upgrade'
];
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
console.log("SystemJS packages:", packages);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
编辑2: 当我设置 '应用' 的格式在systemjs.config.js 'CJS',即
'app': { main: 'main.js', defaultExtension: 'js', format: 'cjs' },
当使用commonjs编译代码时,我不再在上面提到的app.module.ngfactory.js中出现错误。
然而,在浏览器中运行的时候,然后我得到以下错误(安装后traceur;没有traceur我刚刚得到上述traceur错误):
(index):52 Error: (SystemJS) No provider for NgZone! Error: No provider for NgZone! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1255:38) at NoProviderError.AbstractProviderError [as constructor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1739:20) at new NoProviderError (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1770:20) at ReflectiveInjector_._throwOrNull (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3366:23) at ReflectiveInjector_._getByKeyDefault (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3394:29) at ReflectiveInjector_._getByKey (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3357:29) at ReflectiveInjector_.get (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3166:25) at AppModuleInjector.createInternal (https://147.252.67.223:3443/dist/app/app.module.ngfactory.js:610:69) at AppModuleInjector.NgModuleInjector.create (https://147.252.67.223:3443/node_modules/@angular/core/src/linker/ng_module_factory.js!transpiled:96:32) Evaluating https://147.252.67.223:3443/dist/app/main.js Error loading https://147.252.67.223:3443/dist/app/main.js
我tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"rootDir":"./src",
"outDir":"./dist"
},
"angularCompilerOptions": {
"genDir": ".",
"debug": true,
"skipMetadataEmit": true
}
}
任何帮助,非常感谢。
感谢您的建议。我试过了,但没有奏效。仍然得到相同的错误。 –
@BrendanB你可以github回购? –
谢谢,但我不能。这是一个私人工作项目。我将尝试使用Angular CLI。祝一切顺利。 –