3

I have built an Angular2 app that works great locally on both my work and home computers but fails when I try pushing it to Azure!

All of the 4 .js files that are produced from ng build -prod command (inline, main, polyfills and vendor) report a error in the console:

Uncaught SyntaxError: Unexpected token <

When I click through the highlighted line is always in my index.html page:

<!DOCTYPE html>

I presume that this is either a bug in the latest version of CLI or a dependency issue but I don't know where to start as I can't replicate it locally, even with ng serve -prod

My package.json file is:

{
  "name": "budget.front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.4.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6",
    "angular2-jwt":"~0.1.28",
    "auth0-js": "^8.3.0",
    "auth0-lock": "^10.12.3",
    "chart.js": "^2.5.0",
    "ng2-charts": "^1.5.0",
    "@types/node": "^6.0.46"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0"
  }
}

and my system is:

@angular/cli: 1.0.0-rc.2
node: 6.9.1
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9

Update with index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Budget </title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/ice-cream.png">


<link rel="stylesheet" 
  href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

dist\index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Budget </title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/ice-cream.png">


<link rel="stylesheet" 
      href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">

    <script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

<link href="styles.bd88389e6ebba2f4c82b.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.176eda039efb277d0b1a.bundle.js"></script><script type="text/javascript" src="polyfills.f52c146b4f7d1751829e.bundle.js"></script><script type="text/javascript" src="vendor.02550e5852673137ddc8.bundle.js"></script><script type="text/javascript" src="main.d7e4099a93c3c9dc1bf6.bundle.js"></script></body>
</html>

This is my first app with Angular and I just keep running into brick walls with one thing or the other!

Web.config file, added to resolve angular routing as per another issue

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
        <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="None" />
        </rule>

        <!-- check if its root url and navigate to default page -->
        <rule name="Index Request" enabled="true" stopProcessing="true">
        <match url="^$" />
        <action type="Redirect" url="/home" logRewrittenUrl="true" />
        </rule>

        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Rewrite" url="index.html" />
        </rule>

        </rules>
        </rewrite>
    </system.webServer>
</configuration>
Chris A
  • 144
  • 2
  • 11
  • Please share the index.html code too – surajck Mar 15 '17 at 20:04
  • Just added, meant to include that! – Chris A Mar 15 '17 at 20:08
  • Is this the post-`ng build` (dist) index.html file? (Looks like this is your src -- cli modifies your index.html during `ng build` to include the app dependencies.) – Steve Mar 15 '17 at 20:13
  • Try to replace your prod build node_modules folder with your local. I experienced that some subdependenciesbwere not installed properly. – Max Mar 15 '17 at 20:15
  • 1
    @SteveG. good point, question updated thanks – Chris A Mar 15 '17 at 20:17
  • 1
    @SteveG. I think its serving the index.html, I get the "loading app" message but it hits the javascript error and it fails. I've added a screen grab of the console if it helps? – Chris A Mar 15 '17 at 20:23
  • You probably messed up your server and requests for bundle.js are instead serving the 404 or an error message, that probably starts with ` ` (hence the unexpected `<`) – Joseph Nields Mar 15 '17 at 20:24

2 Answers2

2

It looks like it is a problem with your URL rewrite section of your web.config. It's serving those files back as your index.html page.

Try replacing your rewrite section with something similar to this to test the thoery:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This basically uses a RegEx to route all requests back to index.html (or root, if you prefer), except for the static resources that I'm using (.js, .css, .png, etc.)

Side-Note: If you're also hosting a .Net app on this same domain, you may want to modify your .Net application's route config or deep linking to your angular app isn't going to work.

You have a few options, although since I don't know your requirements, I can't recommend one over the other. You could:

If the .Net app is not needed:

  1. Remove the .Net app entirely and just host static files on your Azure site, or:
  2. Modify your Azure site app's [.Net] route config to redirect all controller requests to your home controller. (Not really your best option, IMO.)
Steve
  • 11,596
  • 7
  • 39
  • 53
  • Hi, I tried this code but I get a "The page cannot be displayed because an internal server error has occurred." so progress! – Chris A Mar 15 '17 at 20:39
  • The deployment is successful though, so I guess more of a run time error now ? – Chris A Mar 15 '17 at 20:42
  • No, well not that I am aware of, the back end of this app is on a different url BackEndApp.Azure rather than the FrontendApp.Azure. Is there anywhere else I can look to rule that out? – Chris A Mar 15 '17 at 20:50
  • This is the error I get in Azure: This error occurs when there is a problem reading the configuration file for the Web server or Web application. In some cases, the event logs may contain more information about what caused this error. – Chris A Mar 15 '17 at 20:53
  • 1
    Good idea, but I don't have the rep! – Chris A Mar 15 '17 at 21:09
  • Yeah just a basic default Web App. Looking at the console in the portal, it looks to be the same set of files as per my Angular project – Chris A Mar 15 '17 at 21:25
  • @ChrisA So it looks like your site is down again. It appeared to be working for a bit a while ago and I was able to see your Angular app. Did something else change? – Steve Mar 15 '17 at 21:30
  • Ah yes, I think I missed one of the deployments but you caught it up! I basically removed the top rule in my web.config, and then replaced the whole thing with the code you suggested which didn't work – Chris A Mar 15 '17 at 21:34
  • @ChrisA No problem! Glad that I could help. Good luck with your app! – Steve Mar 15 '17 at 21:36
2

This is due the creation of project directory inside the dist folder which is not being pointed by your index.html file. Fixed it by changing the base tag from <base href="/">to <base href="/project-app/"> inside index.html file.

Vaibhav Verma
  • 127
  • 1
  • 11