angular 2 rc 1 can't make it work in IE

mvperez commented 8 years ago

Hi, Using the "QuickStart" as an example, I create a ASP.NT 5 Empty project and put in the QuickStart files. I ran it and working fine in Chrome and in MS Edge but not in IE (v11).

Steps to reproduce and a minimal demo of the problem Index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="styles.css">-->
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="/libs/es6-promise/dist/es6-promise.js"></script> 
    <script src="/libs/es6-shim/es6-shim.js"></script>  
    <script src="/libs/reflect-metadata/Reflect.js"></script>
    <script src="/libs/zone.js/dist/zone.js"></script>
    <script src="/libs/systemjs/dist/system.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

systemjs.config.js

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app/typescripts/compiledscripts', // 'dist',
        'rxjs': 'libs/rxjs',
        '@angular': 'libs/@angular',
        'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api'
    };

    // 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' },
        '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/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
    ];

    // 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' };
    });

    var config = {
        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);

F12 Error

Please let me know if you need more details.

Cheers, Marvin

codestellar commented 8 years ago

@marvinvperez did you make the changes in package.json to drop the compiled scripts in the new location? Please note tsc --outDir "scripts": { "start": "tsc --outDir app/typescripts/compiledScripts && concurrently \"tsc --outDir app/typescripts/compiledScripts -w\" \"lite-server\" ", "docker-build": "docker build -t ng2-quickstart .", "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js", "lint": "tslint ./app/**/*.ts -t verbose", "lite": "lite-server", "postinstall": "typings install", "test": "tsc --outDir app/typescripts/compiledScripts && concurrently \"tsc --outDir app/typescripts/compiledScripts -w\" \"karma start karma.conf.js", "tsc": "tsc --outDir app/typescripts/compiledScripts", "tsc:w": "tsc --outDir app/typescripts/compiledScripts -w", "typings": "typings", "webdriver:update": "webdriver-manager update" } Also are you using gulp for build and launching server and not npm start?

mvperez commented 8 years ago

No. I did not change like what you have provided below. However, I my “tsconfig.json” becomes like this:

{ "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "moduleResolution": "node", "removeComments": false, "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true, "rootDir": ".", "outDir": "compiledscripts" }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }

And project folder structure is:

I did not include other files such as protractor, wallaby, karma, etc. I thought that these are optional since I want to try to run the app from IIS/web (asp.net core 1)

Am I doing it wrong?

Note that it is running when I right-click on the index.html and view in browser (Chrome/Edge).

Cheers, Marvin

codestellar commented 8 years ago

@marvinvperez I guess if you have not made any other changes and running it by clicking on view in browser, you should be seeing 'Hello World' and that is coming from startup.cs

You should app.UseStaticFiles() and it will work:

mvperez commented 8 years ago

Oh, I forgot to mention that also works too. I can ran this in VS IIS, again not only in IE.

I have put the project in github repo, appreciate if you can clone it and you can reproduce the problem

https://github.com/marvinvperez/angular2quickstart_aspnetcore.git

Please let me know if you need more details.

codestellar commented 8 years ago

I am able to reproduce the issue @marvinvperez Looking into it. Can you please let me know why are you not compiling typescripts using gulp only?

mvperez commented 8 years ago

You mean you reproduce the issue and fixed? The typesctipts are compiled on build, I don’t have a problem using gulp to compile the typescript. But I can’t understand why it is working in Chrome/Edge except to IE.

wardbell commented 8 years ago

Using this quickstart repo product within the context of Visual Studio and an ASP.NET Core project is _out of scope_.

We are working on guidance for Visual Studio users. Look for a forthcoming "Cookbook" on that subject.

I'm sorry but we simply cannot give you the help you require within this repo.

angular / quickstart

angular 2 rc 1 can't make it work in IE #98