javascript - SystemJS-fel vid förkompilering (inget tillhandahållande för NgZone)
Jag har tidigare använt Angulars kompilation i förväg framgångsrikt. Nu har jag lagt till routing och lazy loading till min app, och jag får det inte att fungera längre.
Jag har uppdaterat min kod för att använda version 2.0 (senaste) och den körs utan problem när jag kompilerar just-in-time. Men när jag kompilerar ahead-of-time får jag följande fel:
(index):52 Fel: (SystemJS) XHR-fel (404 Inte hittad) vid laddning av https://127.0.0.1:3443/traceur.js Fel: XHR-fel (404 Inte hittad) vid laddning av https://127.0.0.1:3443/traceur.js vid XMLHttpRequest.wrapFn [som _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) vid ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) vid Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) vid XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Fel vid laddning av https://127.0.0.1:3443/traceur.js Fel vid laddning av https://127.0.0.1:3443/node_modules/@angular/core/src/linker/ng_module_factory.js som "@angular/core/src/linker/ng_module_factory" från https://127.0.0.1:3443/dist/app/app.module.ngfactory.js
Om man tittar på app.module.ngfactory.js finns det en massa importeringar liknande följande:
...
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');
...
Jag har märkt att om jag ändrar
var import0 = require('@angular/core/src/linker/ng_module_factory');
till
import * as import0 from '@angular/core/src/linker/ng_module_factory';
SystemJS accepterar denna rad och samma fel utlöses för nästa rad, det vill säga
var import1 = require('./app.module');
Så jag har försökt få SystemJS att känna igen detta CommonJS-stilformat, men det resulterar bara i andra fel, ingen av dem är tydligare än det ovan.
Redigera: När jag byter till att använda es2015-moduler i tsconfig och kör appen får jag det (fruktade) traceur.js-felet:
https://127.0.0.1:3443/traceur.js Kunde inte ladda resurs: servern svarade med status 404 (Inte hittad) 2016-09-26 10:11:19.842 127.0.0.1/:52 Fel: (SystemJS) XHR-fel (404 Inte hittad) vid laddning av https://127.0.0.1:3443/traceur.js Fel: XHR-fel (404 Inte hittad) vid laddning av https://127.0.0.1:3443/traceur.js vid XMLHttpRequest.wrapFn [som _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) vid ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) vid Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) vid XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Fel vid laddning av https://127.0.0.1:3443/traceur.js Fel vid laddning av https://127.0.0.1:3443/dist/app/main.js
Jag har stött på detta tidigare och löst det genom att ta bort utkommenterad kod som innehöll ett importuttryck. Den här gången har jag inga rader i min kod som ser ut så här.
Här är min 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);
Redigera 2: När jag ställer in formatet för 'app' till 'cjs' i systemjs.config.js, d.v.s.
'app': { main: 'main.js', defaultExtension: 'js', format: 'cjs' },
Jag får inte längre felet i app.module.ngfactory.js som nämns ovan när koden kompileras med commonjs.
Men när jag kör i en webbläsare får jag då följande fel (efter att ha installerat traceur; utan traceur får jag bara det ovanstående traceur-felet):
(index):52 Fel: (SystemJS) Ingen leverantör för NgZone! Fel: Ingen leverantör för NgZone! vid NoProviderError.Error (native) vid NoProviderError.BaseError [som konstruktor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1255:38) vid NoProviderError.AbstractProviderError [som konstruktor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1739:20) vid ny NoProviderError (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1770:20) vid ReflectiveInjector_._throwOrNull (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3366:23) vid ReflectiveInjector_._getByKeyDefault (https://147. 252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3394:29) vid ReflectiveInjector_._getByKey (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3357:29) vid ReflectiveInjector_.get (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3166:25) vid AppModuleInjector.createInternal (https://147.252.67.223:3443/dist/app/app.module.ngfactory.js:610:69) vid AppModuleInjector.NgModuleInjector.create (https://147.252.67.223:3443/node_modules/@angular/core/src/linker/ng_module_factory.js!transpiled:96:32) Utvärderar https://147.252.67.223:3443/dist/app/main.js Fel vid laddning https://147.252.67.223:3443/dist/app/main.js
Min 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
}
}
All hjälp uppskattas mycket.
Svar #1
Jag stötte på ett liknande problem när jag bytte från Angular RC6 till 2.0.0, på grund av systemjs.config.js.
Jag slutar med att göra om hela systemjs.config.js baserat på den senaste snabbstartguiden: https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files med vissa modifieringar.
Ett problem jag ser i din systemjs.config.js är att referenser till följande paket saknas:
- es6-shim (eller core-js)
- reflect-metadata
- zone.js
Följande är min systemjs.config.js
(function (global) {
System.config({
paths: {
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'es6-shim': 'npm:es6-shim',
'reflect-metadata': 'npm:reflect-metadata',
'rxjs': 'npm:rxjs',
'zone.js': 'npm:zone.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'app': { main: 'main.js', defaultExtension: 'js' },
'es6-shim': { main: 'es6-shim.min.js', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect.js', defaultExtension: 'js' },
'rxjs': { main: 'bundles/Rx.min.js', defaultExtension: 'js' },
'zone.js': { main: 'dist/zone.min.js', defaultExtension: 'js' }
}
});
})(this);