I am looking to run Angular 2 from CDN links with SystemJS and also want to setup unit testing with Jasmine.
I have managed to get it loading the application and setup Jasmine in my code which is shown below:
/**
* based on systemjs.config.js in angular.io
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var addRouting = false;
//map tells the System loader where to look for things
var map = {
'app': 'bundles/core/src', // 'dist',
'rxjs': 'http://ift.tt/2cAUaQo' + rxJsVersion,
'angular2-in-memory-web-api': 'http://ift.tt/2aY4lzR', // get latest
'ts': 'http://ift.tt/2cATLxl' + typescriptPluginVersion + '/lib/plugin.js',
'typescript': 'http://ift.tt/2ch4U9k' + typescriptVersion + '/lib/typescript.js'
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/testing',
'@angular/upgrade',
'@angular/forms',
]
// add map entries for angular packages in the form '@angular/common': 'http://ift.tt/2cAU9vV'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + '@' + angularVersion;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
if ( addRouting ){
// Router API
map['@angular/router'] = 'http://ift.tt/2ch4LTm' + angularRouterVersion;
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
}
var config = {
transpiler: 'ts',
typescriptOptions: {
emitDecoratorMetadata: true,
module: "commonjs",
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
This loads the Angular 2 library sucessfully and I am able to see Angular render in the page using the following markup:
<script src=""></script>
<script>
function loadTestingScripts(){
return Promise.all([
System.import('bundles/core/src/app/app.spec.ts')
]);
}
Promise.all([
System.import('app')
])
.then( loadTestingScripts() )
.then( window.onload )
.catch( console.error.bind(console) );
</script>
However when I try and run the following test code:
import { ComponentFixture, TestBed } from '@angular/core/testing/index';
import { By } from '@angular/platform-browser/index';
import { DebugElement } from '@angular/core/index';
import { AppComponent } from './app.component';
let comp: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let el: DebugElement;
describe('1st tests', () => {
it('true is true', () => expect(true).toBe(true));
});
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ AppComponent ], // declare the test component
});
fixture = TestBed.createComponent(AppComponent);
});
});
I recieve an error 'Unexpected token import' which looks like it must refer to the typescript file being unreadable as it has not been transpiled.
However I have seen this achieved here with a beta version of the library:
Is there any reason why the latest version cannot run unit testing from CDN urls?
Aucun commentaire:
Enregistrer un commentaire