I recently updated from Angular 7 to Angular 8 using ng update. After following the expected migration path with no issues I built and deployed. Everything worked great until I started checking other browser versions and realized some were getting 401 unauthorized from the server in requesting the js files.
The issue is, the differential loading is done like this:
<script src="main-es2015.1234.js" type="module"></script>
It seems that some browsers, some of the time, don't want to pass auth info for <script type="module" .... It strikes me that there are several ways to work around this:
I can work around this by adding crossorigin="use-credentials" to the script tag but I haven't been able to find how to do that in ng build.
I can tweak the auth settings to somehow allow anonymous requests through to my JS files but I haven't been able to find the dotnet core method of doing this without a lot of complexity. Right now the entire app only allows windows auth. If I allow anonymous I don't want to have to worry somehow that I've left a controller open.
I'm thinking the former option is the cleaner solution but I'm open to alternatives.
Since the posting of the accepted answer the option to handle this in the first way McAden suggests by adding crossorigin="use-credentials" has been added to the Angular CLI options.
Original feature request
Angular CLI documentation
In your angular.json add
{
...,
"build": {
"builder": ...,
"options": {
...
"crossOrigin": "use-credentials"
}
}
}
I modified angular.json and used an explicit deployUrl under projects -> main -> architect -> build -> options:
"deployUrl": "/ClientApp/dist/",
That alters the script tags:
<script src="/ClientApp/dist/main-es2015.1234.js" type="module">
So it no longer goes through the dotnet core application to pull the js file. Then in IIS I set that folder to allow anonymous.
Related
I built an Electron app and I am now looking at how to distribute it.
I went with electron-builder to handle packaging etc.
For a bit of context, as a web developer, I am used to continuously deploy web apps on a web server but I have a hard time figuring out how to distribute a packaged one in Electron.
In electron-builder docs there is a brief mention about testing auto-update:
"Note that in order to develop/test UI/UX of updating without packaging the application you need to have a file named dev-app-update.yml in the root of your project, which matches your publish setting from electron-builder config (but in YAML format)"
But, it's rather vague...
So I actually have two questions:
1. How do I actually test the auto-update flow?
Do I need to actually publish a new version to trigger an update locally? Seems pretty unclear, it would be like developing against the production server.
2. Is it possible to have a fallback for unsigned code?
I don't have yet any certificate for code signing. So the OS/app will block the auto-update. But, I'd still want to tell the user that an update is available so they can go and download the app manually. Can I do that? (going back to point 1, I'd like to be able to test this flow)
I've just finished dealing with this. I also wanted to test against a non-production server and avoid having to package my app each time I iterated. To test downloads I had to sign my app, which slowed things down. But it sounds like you just need to check for updates. Which I think you can do as follows...
I created a dummy github repo, then created a a file dev-app-update.yml containing:
owner: <user or organization name>
repo: dev-auto-update-testing
provider: github
The path where this file is expected to be defaults to a place you can't access. Thankfully, you can override it like so:
if (isDev) {
// Useful for some dev/debugging tasks, but download can
// not be validated becuase dev app is not signed
autoUpdater.updateConfigPath = path.join(__dirname, 'dev-app-update.yml');
}
...that should be enough for your case -- since you don't need downloads.
If not, here are some other tips:
you can change the repo setting in your electron-builder config to point at your dummy repo then package your app. This will give you a packed, production build that points at your dummy repo -- this is how I did my download testing (though I have a cert, and signed my app)
you should be calling autoUpdate's checkForUpdates(), but if checkForUpdatesAndNotify() gives you a useful OS Notification then you should be able to set autoUpdater.autoDownload to false and end up with what you need.
Lastly, it sounds you could skip autoUpdater, since you won't be using the download feature anyway. Instead you could use github's releases api, assuming you use github to host your release. If not then your host should have something similar. Use that to check for updates then tell the user from within your App (could present them with a clickable URL too). If you want OS Notifications electron has a module for that.
We're using electron-updater with GitHub as a provider for auto-updates. Unfortunately, it breaks a lot and the electron-builder team doesn't support these issues well (1, 2, 3) (from my own experience, but you can find more examples on GitHub).
One way to test updates in dev mode:
Create a build of your app with an arbitrarily high version number
Create a public repo and publish the above build
Create a dev-app-update.yml next to your main entry point and configure it for the repo above (see)
In your main entry point:
import { autoUpdater } from "electron-updater";
...
if (process.env.NODE_ENV === "development") {
// Customize the test by toggling these lines
// autoUpdater.autoDownload = false
// autoUpdater.autoInstallOnAppQuit = false;
autoUpdater.checkForUpdates();
}
Then when running yarn dev you should see something like:
Checking for update
...
Found version 100.0.0 (url: <>.exe)
Downloading update from <>.exe
updaterCacheDirName is not specified in app-update.yml Was app build using at least electron-builder 20.34.0?
updater cache dir: C:\Users\<>\AppData\Local\Electron
New version 100.0.0 has been downloaded to C:\Users\<>\AppData\Local\Electron\pending\<>.exe
And it should install when you close the dev app.
This should give you some certainty but we still ran into issues in production. If you want to be sure, play through the full update flow with a test repo but packaged production apps just as you would do with the live one.
Is there any working npm package for ADAL and Angular 5 (AOT build)?
I did try few, but everyone had some problems.
adal-angular4plus
ERROR in node_modules/adal-angular4plus/adal4.service.d.ts(40,25): error TS2503: Cannot find namespace 'adal'.
node_modules/adal-angular4plus/adal4.service.d.ts(48,22): error TS2503: Cannot find namespace 'adal'. Installing #types/adal-angular nor #types/adal helped.
ng2-adal
Did not work in AOT
ng2-adal-aot
acquireToken() after injecting the iframe it refreshes automatically the appModule. Hard to explain. But imagine the situation where you do a http request in ngOnInit of a component which is hosrted by appModule and there is a httpInterceptor which calls inside acquireToken() - the appModule gets refreshed so it is neverending cycle.
Have you checked the ezcode-adal-angular5? This component:
was created from a angular 5 cli project and leveraged adal.js internally.
supports Angular 5 projects.
was able to authenticate users using Azure AD.
was able to secure the route components same as adaljs for angularjs.
you can also check a sample from https://github.com/frankchen76/EZCode-Adal-Angular5-Sample
In order to have adal-angular4plus work, add import { adal } from 'adal-angular'; in the .ts file where you define your configuration.
You may also want to check adal-angular5, an Active Directory Authentication Library (ADAL) wrapper package for Angular 5. Uses HttpClient and HttpClientModule.
A working example using adal-angular5.
This is my first question here. I have already spent hours reading topics, but never posted a question before.
At this moment I am developping an Angular4 application. I am running my app with "ng build --watch" and a local PHP webserver pointed to the 'dist' folder of my angular app. (When using build-in liveload server 'ng serve' there isn't a PHP server available, so i fixed this with 'ng build --watch' and a local PHP build-in server of PHPStorm)
To communicate with my MYSQL database, I used before single-php files in a directory called '/api'. I added this folder to my assets in the angular-cli.json file, so the API folder is also being pushed to the 'dist' folder when running the app local.
In this case, I was able to use relative paths to point my http requests. (like a POST action to '/api/insert.php'). So when publishing my app, it was not necessary to modify the paths of my HTTP requests.
But now I would like to use a backend framework, after some research I found http://api-platform.com, a PHP framework builded on Symfony3. When i am running this API, this runs for example on localhost:8000 while my angular applciation runs on localhost:4200.
So, that means i would have to use absolute paths for my HTTP requests. (eq http://localhost:8000/api/insert.php instead of /api/insert.php).
At this moment I have 2 projects: one front-end and one back-end. To make developping faster, easier, and simpler I would like to put both projects together. I know some developpers don't like this way of architecture, but in my case it is the best solution, one project, with a front and back-end included.
Concrete: Is it possible to run a debug-webserver in development zone with my angular app running on eq localhost and my symfony3/api-platform on eq localhost/api on the same time, same domain, and same port?
I would like to keep this project folder structure to keep it clean:
- projectname (root)
--- frontend
----- (all directories/files from angular)
--- backend
----- (all directories from api-platform / symfony3)
Sincerely,
Lander
running both application on the same domain (f.ex. localhost) is no problem, but they need to run on different ports. In your case angular is running on 4200 and your PHP application on 8000. You can configure angular with a proxy, which passes requests to http://localhost:4200/api to http://localhost:8000/api
In your angular root directory (where your package.json is), create a file proxy.conf.json
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
then change your package.json to use this proxy:
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
// other scripts
}
now run the webpack server with npm start instead of ng serve
Personally, I git ignore the proxy.conf.json, because some colleagues run their backend on a different port. Therefore we created a proxy.conf.dist.json with the above contents in git. If you want to use a different port, you can just copy it and change the port, while those, who want to use the default, can simply symlink to it.
UPDATE:
We recently switched to another method, namely using environment configurations.
By default, Angular has a dev and prod environment, specified in the .angular-cli.json
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
In these files, specify the API path:
environment.ts
export const environment = {
production: false,
apiUrl: '//localhost:8000'
};
environment.prod.ts
export const environment = {
production: true,
apiUrl: '//my-api-domain.tld'
};
You can add as many environments as you want (f.ex. for tests, beta, etc.). In angular, you can use the environment by importing it:
import {environment} from '../environments/environment';
But I suggest creating a config service following this answer: https://stackoverflow.com/a/43193574/7933618
I ended up by using another backend. In my case an nodeJS server was the best, fast and most simple solution.
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm
After checking out the source from: https://github.com/RallyApps/app-catalog
I attempted to build the Portfolio Item cumulative flow diagram src/apps/charts/rpm/cfd locally using
rally-app-builder build which shows no errors
Launching App-debug.html allows me to input the relevant settings, but once I click 'save', nothing renders and there are no errors logged to the JS console either, making debugging challenging.
I attempted to copy the build output into a custom html app inside rally, which displayed the same behaviour.
Is this a bug with the example app? Or have I missed some crucial configuration step?
EDIT:
Extra info - I tried running via the rally-app-builder to no avail (think it's related to this issue: https://github.com/RallyApps/rally-app-builder/issues/45). I attempted to flatten the structure and the result of that was a cross-origin request error.
Running from file resulted in a 403 for the SDK
Sorry about that- that Rally App Builder issue is definitely the problem you're running into. Just as a test I downloaded the built html output for that app from the app catalog release: https://github.com/RallyApps/app-catalog/releases/download/2.1/2.1.zip
It worked when installed on a custom html app on my dashboard once I edited the app settings and configured a portfolio item.
If you're looking to tweak this app from source you'll probably have to copy all those files referenced in config.json that live in parent directories into the main app directory and fix the paths in config.json. Then you should be able to build and run the app normally using Rally App Builder.
It seems this app was really not designed to be run externally, so I added a little code to ease the issues I ran into:
In PortfolioChartAppBase.js, _loadSavedPortfolioItem function:
scope: this,
fetch: ['Name', 'ObjectID'] //this is new
And I added some default settings as a top level config object in CumulativeFlowChartApp.js (since the code to force into settings mode doesn't seem to work correctly when running externally):
config: {
defaultSettings: {
portfolioItemPicker: '/portfolioitem/feature/52725935318', //insert a valid oid here
startDate: 'actualstartdate',
endDate: 'actualenddate',
chartAggregationType: 'storycount'
}
},